<template>
    <div class="circle-three v-fl wd-tc">
        <div class="wd-ma">
            <div class="inner-ring-three wd-tc ">
                <div class="c-blue">窗口数</div>
                <div class="num c-yellow"><ICountUp
                    :endVal="parseInt(indexData)"
                    :key="Math.random()"
                    @ready="onReady"
                /></div>
            </div>
            <div class="outer-ring-three rotates">
            </div>
        </div>
        <div class="c-blue">预约量：约 <span class="c-yellow"><ICountUp
            :endVal="parseInt(indexData)"
            :key="Math.random()"
            @ready="onReady"
        /></span> 人</div>
    </div>
</template>
<script>
    import ICountUp from 'vue-countup-v2'
    export default {
        name:'CircleThree',
        data() {
            return {
            }
        },
        components: {
            ICountUp
        },
        props:['indexData'],
        methods:{
            onReady(instance, CountUp) {
               //instance.update();
            },
        },
        created(){
        },
    }

</script>
<style lang="less" scoped>
    /*转圈开始*/
    @keyframes rotates{
        from{transform:rotate(0deg);
            -ms-transform:rotate(0deg); /* Internet Explorer */
            -moz-transform:rotate(0deg); /* Firefox */
            -webkit-transform:rotate(0deg); /* Safari 和 Chrome */
            -o-transform:rotate(0deg); /* Opera */}
        to{
            transform:rotate(360deg);
            -ms-transform:rotate(360deg); /* Internet Explorer */
            -moz-transform:rotate(360deg); /* Firefox */
            -webkit-transform:rotate(360deg); /* Safari 和 Chrome */
            -o-transform:rotate(360deg);
        }
    }
    .rotates{
        animation: rotates 5s linear infinite;
        -webkit-animation: rotates 5s linear infinite;
    }
    .wd-tc{
        text-align: center;
       // color: #ffffff;
    }
    .c-blue{
        font-size: 56px;
        font-weight: bold;
        span{
            font-size:30px;
        }
    }
    .c-yellow{
        font-size: 36px!important;
    }
    .circle-three{
        margin: 35px;
        span{
            font-size: 54px;
        }
       .wd-ma{
           position: relative;
           width: 238px;
       }
        .inner-ring-three{
            width: 238px;
            height: 239px;
          //  background-image: url(./img/inner-ring-three.png);
            background: url(./img/inner-ring-three.png) no-repeat;
            padding-top: 50px;
            .num{
                font-size: 72px;
            }
        }
        .outer-ring-three{
            width: 263px;
            height: 263px;
           // background-image: url(./img/outer-ring-three.png);
            background: url(./img/outer-ring-three.png) no-repeat;
            position: absolute;
            top: -12px;
            left: -13px;
        }
    }
</style>


